12. Plugins

Heading

Plugins are one of the last vital concepts for webpack. The Webpack documentation explains them like this:

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

So, pretty much anything that we need to do that falls outside the range of loaders will be accomplished with plugins.

Plugins can do all sorts of things, from automatically adding asset references to an html file (which we’ll cover in a second) to allowing for hot module replacement - which is used in React’s Create React App to create an auto updating development server.

FEND C04 L02 A06 Plugins

Quiz

Would a webpack plugin or loader be responsible for creating global constant values that can be used throughout the application?
SOLUTION: Plugin

Quiz

Would a webpack plugin or loader be responsible for taking a .less file and returning css?
SOLUTION: Loader

Quiz

What are the three steps to install most plugins:
SOLUTION:
  • Declare a new instance of the plugin in the plugins list
  • Require the plugin from the node modules directory
  • Install the plugin via yarn or npm

Interview Question

QUESTION:

Interview Question

In javascript, when you see the "new" keyword, what does it do and what does it say about the thing it is being called on?

ANSWER:

Some words and concepts that should be part of your answer here are:

  • The word instantiate, you create a new instance of the class
  • We create instances from classes, so the thing it is called on must be a class
  • If you want to get into the nitty gritty, you could talk about javascript pseudo classes and how the new keyword in javascript classes is really just syntactic sugar for javascript prototypes

Next Concept